<template>
  <div class="all">
    <el-form :inline="true" ref="formInline" :model="formInline" class="form-style">
      <el-row>
        <el-col :span="8">
          <el-form-item label="关键词：" prop="input" style="margin:15px 0 15px 40px">
        <el-input v-model="formInline.input" placeholder="订单号"></el-input>
      </el-form-item>
        </el-col>
        <el-col :span="10">
           <el-form-item label="订单状态：" prop="region" style="margin:15px 0 15px 10px">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option label="未完成" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
        </el-select>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="startTime" style="margin:15px 0 15px 40px">
        <el-date-picker
          style="margin-right:10px"
          v-model="formInline.startTime"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
        <span>至</span>
      </el-form-item>
      <el-form-item prop="endTime" style="margin:15px 0 15px 10px">
        <el-date-picker v-model="formInline.endTime" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item style="margin:15px 0 15px 10px">
        <el-button @click="clean('formInline')" style="margin-left:20px" type="warning">重置</el-button>
        <el-button @click="search" type="primary">查询</el-button>
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <div class="table-style">
      <el-table :data="tableData" class="middle">
        <el-table-column label="商品" width="380">
          <template slot-scope="scope">
            <div class="middle-goods">
              <div class="goods-t">
                <div>订单编号：{{scope.row.AllOrderNumber}}</div>
                <div>{{scope.row.CreateTime}}</div>
              </div>
              <div
                class="goods-b"
                v-for="(oplitem,oplindex) in scope.row.OrderProductsList"
                :key="oplindex"
              >
                <el-image :src="oplitem.ProductPhoto" style="width:70px;height:70px"></el-image>
                <div class="goods-b-r">
                  <div
                    style="overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;"
                  >{{oplitem.ProductName}}</div>
                  <div class="goods-b-r-b">
                    <div>￥{{oplitem.PayProductPrice}}</div>
                    <div>{{oplitem.ProductModelStr}}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单总额">
          <template slot-scope="scope">
            <span style="color:red">￥{{scope.row.AllPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货人">
          <template slot-scope="scope">
            <div class="people">
              <span v-if="scope.row.ReceivingName ===''">--</span>
              <span v-else>{{scope.row.ReceivingName}}</span>
              <span v-if="scope.row.ReceivingPhoneNumber === ''">--</span>
              <span v-else>{{scope.row.ReceivingPhoneNumber}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货地址">
          <template slot-scope="scope">
            <div v-if="scope.row.ReceivingAddress===''">--</div>
            <div
              v-else
              style="display: -webkit-box;-webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;"
            >{{scope.row.ReceivingAddress}}</div>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <p v-if="scope.row.StateStr === '已完成'" style="color:green">{{scope.row.StateStr}}</p>
            <p v-if="scope.row.StateStr === '未完成'" style="color:red">{{scope.row.StateStr}}</p>
          </template>
        </el-table-column>
        <el-table-column label="物流单号">
          <template slot-scope="scope">
            <p v-if="scope.row.StateStr==='已完成'">{{scope.row.AllOrderNumber}}</p>
            <div v-if="scope.row.StateStr==='未完成'" class="fixorder">
              <el-input placeholder="请输入物流单号" size="mini"></el-input>
              <el-button size="mini">发货</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @handleSizeChange="pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { LoadOrder } from "@/request/api";
import Botpage from "@/components/botpage/Botpage";
export default {
  components: {
    Botpage,
  },
  data() {
    return {
      total: 1,
      PageSize: 10,
      currentPage: 1,
      tableData: [],
      formInline: {},
    };
  },
  methods: {
    getTableDatas() {
      LoadOrder({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        OrderStr: "o.State DESC",
        ScreenValues: this.formInline.input,
        StartTime: this.formInline.startTime,
        EndTime: this.formInline.endTime,
      })
        .then((res) => {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
    },
    del() {
      console.log("del!");
    },
    search() {
      this.getTableDatas();
    },
    formatter(row, column) {
      return row.address;
    },
  },
  mounted() {
    this.getTableDatas();
  },
};
</script>

<style lang="less" scoped>
.all {
  height: 100%;
  width: 100%;
  .top {
    width: 98%;
    height: 90px;
    margin: auto auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .demonstration {
      font-size: 14px;
      color: gray;
    }
    .top-in {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .middle {
    .people {
      display: flex;
      flex-direction: column;
    }
    .middle-goods {
      display: flex;
      flex-direction: column;
      .goods-t {
        flex: 1;
        display: flex;
        justify-content: space-around;
        font-size: 10px;
      }
      .goods-b {
        flex: 4;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .goods-b-r {
          margin-left: 15px;
          flex: 1;
          overflow: hidden;
        }
        .goods-b-r-b {
          flex: 1;
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
}
.fixorder {
  display: flex;
  flex-direction: column;
}
</style>